<template>
  <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-input placeholder="请输入内容" v-model="param.searchText" clearable @clear="getData">            
                    <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
                </el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="addGoods">添加商品</el-button>
            </el-col>
        </el-row>   
        <el-table :data="goodsList" style="width: 100%" border stripe v-loading="tableLoading">
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="goods_name" label="名称"></el-table-column>
            <el-table-column prop="goods_price" label="价格"> </el-table-column>
            <el-table-column prop="goods_number" label="数量"> </el-table-column>
            <el-table-column prop="goods_number" label="创建时间">
                <template scope="scope">
                    {{ scope.row.create_time | myDateFormat }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180px">
                <template scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>            
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="text-align: right;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="param.page"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="param.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="goodsList.length">
        </el-pagination>
    
    </el-card>    
  </div>
</template>

<script>
export default {
    name: '',
    mixins: [],
    components: {},
    props: {},
    data () {
        return {
            tableLoading:false,
            param: {searchText:'', page:1, size:10},
            goodsList:[]
        }
    },
    computed: {},
    watch: {},
    created() {
        this.getData()
    },
    mounted () {},
    methods: {
        getData() {
            this.tableLoading = true
            this.http.get('/goods/list').then((res) => {
                this.tableLoading = false
                if (res.data.code === 200) {
                    this.goodsList = res.data.data
                }
            }).catch((err) => {
                this.tableLoading = false
            })
        },
        addGoods() {
            this.$router.push('/goods/add')
        },
        handleCurrentChange(newPage){
            this.param.page = newPage
            this.getData()
        },
        handleSizeChange(newSize){
            this.param.size = newSize
            this.getData()
        },
    }
}
</script>

<style scoped lang="scss"></style>
